<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '持有列表',
  },
}
</route>
<template>
  <PageLayout :navbarShow="false">
    <!--核心内容区-->
    <scroll-view scroll-y class="wrap">
      <view class="tp">
        <view class="statusBar" :style="{ height: `${statusBarHeight}px` }"></view>
        <!--导航栏-->
        <view class="navbar">
          <wd-navbar title="持有列表" :bordered="false">
            <template #left>
              <view style="display: flex; align-items: center">
                <!--设置按钮-->
                <view style="margin-right: 15rpx">
                  <wd-icon name="setting" size="28rpx" color="#3b3b3b" />
                </view>
                <!--编辑-->
                <view style="margin-right: 15rpx">
                  <wd-icon name="edit-outline" size="28rpx" color="#3b3b3b" />
                </view>
                <!--添加-->
                <view style="margin-right: 15rpx">
                  <wd-icon name="add" size="28rpx" color="#3b3b3b" @click="onClickHold" />
                </view>
              </view>
            </template>
          </wd-navbar>
        </view>
        <!--分组-->
        <view class="tab">
          <scroll-view scroll-x :show-scrollbar="false" class="scroll-view">
            <view
              class="tab-left-item"
              v-for="i in groupList"
              :key="i"
              :class="i.id === groupId ? 'tab-left-item-active' : ''"
              @click.stop="onClickTab(i)"
            >
              <view>{{ i.name }}</view>
            </view>
            <view class="tab-left-item" @click="onClickAddTab">
              <view><wd-icon name="add" /></view>
            </view>
          </scroll-view>
        </view>
        <!--数据统计-->
        <view class="count">
          <view class="count-top">
            <view class="count-top-left">账户信息概览</view>
            <view style="font-size: 24rpx">
              <text>持有收益率：</text>
              <text :style="{ color: countData.totalSy >= 0 ? 'red' : 'green' }">
                {{
                  countData.holdCost === 0
                    ? '0'
                    : ((countData.totalSy / countData.holdCost) * 100).toFixed(2)
                }}%
              </text>
            </view>
          </view>

          <view class="count-data">
            <view class="count-data-left">
              <view class="count-data-left-title">今日总收益</view>
              <view class="count-data-left-data">
                <wd-count-to
                  prefix="￥"
                  :startVal="0"
                  :decimals="2"
                  :endVal="countData.todaySy == null ? 0 : countData.todaySy"
                  :fontSize="16"
                  :color="countData.todaySy >= 0 ? 'red' : 'green'"
                ></wd-count-to>
              </view>
            </view>

            <view class="count-data-right">
              <wd-row>
                <wd-col :span="8">
                  <view class="count-data-right-data">{{ countData.holdNum }}</view>
                  <view class="count-data-right-desc">持有数</view>
                </wd-col>

                <wd-col :span="8">
                  <view class="count-data-right-data">
                    {{ countData.addNum == null ? 0 : countData.addNum }}
                  </view>
                  <view class="count-data-right-desc">宜加仓数</view>
                </wd-col>

                <wd-col :span="8">
                  <view class="count-data-right-data">
                    {{ countData.addMoney == null ? 0 : countData.addMoney }}
                  </view>
                  <view class="count-data-right-desc">宜加仓额</view>
                </wd-col>

                <wd-col :span="8" style="margin-top: 8px">
                  <view class="count-data-right-data">
                    {{ countData.reduceNum == null ? 0 : countData.reduceNum }}
                  </view>
                  <view class="count-data-right-desc">宜减仓数</view>
                </wd-col>

                <wd-col :span="8" style="margin-top: 8px">
                  <view class="count-data-right-data">
                    {{ countData.ylNum == null ? 0 : countData.ylNum }}
                  </view>
                  <view class="count-data-right-desc">盈利数</view>
                </wd-col>

                <wd-col :span="8" style="margin-top: 8px">
                  <view class="count-data-right-data">
                    {{ countData.ykNum == null ? 0 : countData.ykNum }}
                  </view>
                  <view class="count-data-right-desc">浮亏数</view>
                </wd-col>
              </wd-row>
            </view>
          </view>

          <view class="count-bottom">
            <view class="count-bottom-item">
              <image src="../../static/hold/money.png" class="count-bottom-item-img" />
              <view>
                <view class="count-bottom-item-data">
                  <text style="font-size: 20rpx">￥</text>
                  {{ countData.totalZc == null ? 0 : countData.totalZc.toFixed(2) }}
                </view>
                <view class="count-bottom-item-desc">总资产</view>
              </view>
            </view>
            <view class="count-bottom-item">
              <image src="../../static/hold/sy.png" class="count-bottom-item-img" />
              <view>
                <view class="count-bottom-item-data">
                  <text style="font-size: 20rpx">￥</text>
                  {{ countData.totalSy == null ? 0 : countData.totalSy.toFixed(2) }}
                </view>
                <view class="count-bottom-item-desc">持有收益</view>
              </view>
            </view>
          </view>
        </view>

        <wd-gap></wd-gap>

        <view class="list" style="background-color: #fff">
          <view class="list-title-box">
            <wd-row>
              <wd-col :span="12">
                <view style="text-align: left; line-height: 48px; font-size: 26rpx; display: flex">
                  基本信息
                  <view style="display: flex; font-size: 24rpx; align-items: center">
                    （ {{ countData.upNum == null ? 0 : countData.upNum }}
                    <wd-icon name="arrow-thin-up" color="red"></wd-icon>
                    ， {{ countData.downNum == null ? 0 : countData.downNum }}
                    <wd-icon name="arrow-thin-down" color="green"></wd-icon>
                    ）
                  </view>
                </view>
              </wd-col>
              <wd-col :span="12">
                <wd-drop-menu>
                  <wd-drop-menu-item v-model="px" :options="option" @change="handleChange" />
                </wd-drop-menu>
              </wd-col>
            </wd-row>
          </view>
        </view>
      </view>
      <!--基金列表-->
      <view class="list">
        <!--空数据提示-->
        <wd-status-tip
          image="../../static/content.png"
          tip="暂未持有基金"
          v-if="!showLoadingView && dataList.length == 0"
        />

        <!--骨架屏-->
        <view v-else-if="showLoadingView">
          <wd-skeleton theme="paragraph" v-for="i in 3" :key="i" style="margin-bottom: 10rpx" />
        </view>

        <!--数据-->
        <view v-else class="fu-list-item" v-for="i in dataList" :key="i" @click="onClickItem(i)">
          <view>
            <!--名称、提示-->
            <view style="display: flex; justify-content: space-between; align-items: center">
              <view>
                <!--名称-->
                <text>{{ i.name }}</text>
              </view>
              <!--提示内容-->
              <view style="display: flex; align-items: center">
                <view
                  class="tip-box"
                  style="background-color: #f6f8fb; color: #6f717a"
                  v-if="i.tip == '观望区'"
                >
                  {{ i.tip }}
                </view>

                <view
                  class="tip-box"
                  style="background-color: #edfbe0; color: #00bf00"
                  v-else-if="i.tip == '减仓区'"
                >
                  {{ i.tip }}
                </view>

                <view
                  class="tip-box"
                  style="background-color: #fef2ef; color: red"
                  v-else-if="i.tip == '加仓区'"
                >
                  {{ i.tip }}
                </view>

                <view
                  class="tip-box"
                  style="background-color: #fcf5de; color: #dfa950"
                  v-else-if="i.tip == '危险区'"
                >
                  {{ i.tip }}
                </view>

                <view class="tip-box" style="background-color: #e7edff; color: #3379fb" v-else>
                  {{ i.tip }}
                </view>
              </view>
            </view>

            <!--标记-->
            <view style="display: flex; align-items: center">
              <!--所属分组-->
              <view style="margin-right: 8rpx" v-if="groupId === ''">
                <wd-tag color="#6f717a" bg-color="#f6f8fb">{{ i.group_name || '默认' }}</wd-tag>
              </view>
              <!--代码-->
              <view style="margin-right: 8rpx">
                <wd-tag color="#6f717a" bg-color="#f6f8fb">{{ i.code }}</wd-tag>
              </view>
              <!--类型-->
              <view style="margin-right: 8rpx">
                <wd-tag color="#6f717a" bg-color="#f6f8fb">
                  {{ i.type }}
                </wd-tag>
              </view>

              <!--等级-->
              <view style="margin-right: 8rpx">
                <wd-tag color="#6f717a" bg-color="#f6f8fb">
                  {{ i.sub_type }}
                </wd-tag>
              </view>

              <!--自定义标签-->
              <view v-if="i.customize_tag" style="margin-right: 8rpx">
                <wd-tag color="#6f717a" bg-color="#f6f8fb">
                  {{ i.customize_tag }}
                </wd-tag>
              </view>

              <!--日期-->
              <view style="margin-right: 8rpx" v-if="i.show_is_estimate == '是'">
                <wd-tag color="#6f717a" bg-color="#f6f8fb">
                  <text style="margin-right: 2px" v-if="i.show_is_estimate == '是'">估 |</text>
                  {{ i.show_is_estimate == '是' ? i.e_date : i.v_date }}
                </wd-tag>
              </view>

              <!--是否更新-->
              <view v-if="i.v_date == i.e_date">
                <wd-tag color="#ffad6f" bg-color="#fff0e5">已更新</wd-tag>
              </view>
            </view>

            <!--资产、收益、持仓收益/率-->
            <view class="item-row">
              <wd-row>
                <wd-col :span="6">
                  <view class="item-row-name">总资产</view>
                  <view>{{ i.total_zc.toFixed(2) }}</view>
                </wd-col>
                <wd-col :span="10">
                  <view style="text-align: right">
                    <view class="item-row-name">日收益/率</view>
                    <view :style="{ color: i.show_rate >= 0 ? 'red' : 'green' }">
                      {{ i.today_sy >= 0 ? '+' + i.today_sy.toFixed(2) : i.today_sy.toFixed(2) }}
                    </view>
                    <view
                      :style="{ color: i.show_rate >= 0 ? 'red' : 'green' }"
                      style="margin-top: 8rpx"
                    >
                      {{
                        i.show_rate >= 0 ? '+' + i.show_rate.toFixed(2) : i.show_rate.toFixed(2)
                      }}%
                    </view>
                  </view>
                </wd-col>
                <wd-col :span="8">
                  <view style="text-align: right">
                    <view class="item-row-name">累计收益/率</view>
                    <view :style="{ color: i.total_sy >= 0 ? 'red' : 'green' }">
                      {{ i.total_sy >= 0 ? '+' + i.total_sy.toFixed(2) : i.total_sy.toFixed(2) }}
                    </view>
                    <view
                      style="margin-top: 8rpx"
                      :style="{ color: i.total_sy >= 0 ? 'red' : 'green' }"
                    >
                      {{ i.hold_cost === 0 ? '--' : ((i.total_sy / i.hold_cost) * 100).toFixed(2) }}
                      %
                    </view>
                  </view>
                </wd-col>
              </wd-row>
            </view>
          </view>
        </view>
      </view>

      <!--新增持仓-->
      <view class="btn" v-if="!showLoadingView">
        <view @click="onClickHold">
          <wd-icon name="add" size="24rpx"></wd-icon>
          新增持仓
        </view>
      </view>
    </scroll-view>
  </PageLayout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { http } from '@/utils/http'
defineOptions({
  name: 'hold',
  options: {
    styleIsolation: 'shared',
  },
})

// 分组列表
const groupList = ref([])
// 数据列表
const dataList = ref([])
// 每页显示数量
const pageSize = ref(1000)
// 当前页
const current = ref(1)
// 提示排序
const orderTip = ref('')
// 涨幅排序
const orderRate = ref('')
// 分组ID
const groupId = ref('')
// 统计数据
const countData = ref<any>({})
// 显示加载情况
const showLoadingView = ref(true)
// 排序
const px = ref<number>(0)
// 定时器
const timer = ref(null)
// 下拉列表
const option = ref<Record<string, any>[]>([
  { label: '默认排序', value: 0 },
  { label: '按日收益率正序（从低到高）', value: 1 },
  { label: '按日收益率倒序（从高到低）', value: 2 },
])
const globalData = getApp().globalData
const { systemInfo, navHeight } = globalData
const { statusBarHeight } = systemInfo

/**
 * 加载数据
 */
const loadData = () => {
  const params = {
    pageNo: current.value,
    pageSize: pageSize.value,
    // orderTip: orderTip.value,
    orderRate: orderRate.value,
    groupId: groupId.value,
  }
  http.get('/sys/fund/hold/list', params).then((res: any) => {
    if (res.success) {
      dataList.value = res.result.records
      showLoadingView.value = false
    }
  })
}

// 改变排序
const handleChange = ({ value }) => {
  if (value === 0) {
    // 默认
    orderRate.value = ''
  } else if (value === 1) {
    // 按日收益率正序
    orderRate.value = 'asc'
  } else if (value === 2) {
    // 按日收益率倒序
    orderRate.value = 'desc'
  }
  // 重新排序
  loadData()
}

// 加载统计数据
const loadCount = () => {
  http.get('/sys/fund/hold/findDetailCount', { groupId: groupId.value }).then((res: any) => {
    if (res.success) {
      countData.value = res.result
    }
  })
}

// 点击新增持有
const onClickHold = () => {
  uni.navigateTo({
    url: '/pages/hold/add-hold',
  })
}

// 点击 栏目
function onClickItem(data) {
  uni.navigateTo({
    url:
      '/pages/detail/detail?code=' +
      data.code +
      '&fundId=' +
      data.fund_id +
      '&optId=' +
      data.id +
      '&lineType=hold',
  })
}

// 点击新增组名
const onClickAddTab = () => {}

/**
 * 加载分组列表
 */
const loadGroupList = () => {
  http.get('/sys/fund/hold/group/list').then((res: any) => {
    if (res.success) {
      // 分组列表
      groupList.value = res.result
      // 获取缓存数据
      const storageGroupId = uni.getStorageSync('hold_groupId_storage')
      // 设置默认值
      if (groupList.value.length > 0) {
        if (storageGroupId) {
          // 标记
          let flag = false
          // 遍历
          groupList.value.forEach((i) => {
            if (storageGroupId === i.id) {
              flag = true
            }
          })
          // 判断是否存在
          if (!flag) {
            uni.setStorageSync('hold_groupId_storage', groupList.value[0].id)
            groupId.value = groupList.value[0].id
          }
        } else {
          uni.setStorageSync('hold_groupId_storage', groupList.value[0].id)
          groupId.value = groupList.value[0].id
        }
      } else {
        uni.setStorageSync('hold_groupId_storage', '')
        groupId.value = ''
      }
      // 设置显示的分组
      groupList.value.unshift({ id: '', name: '全部' })

      refreshData()
    }
  })
}

// 点击标签
const onClickTab = (data) => {
  groupId.value = data.id
  refreshData()
}

// 刷新数据
const refreshData = () => {
  // 加载数据
  loadData()
  // 加载统计数据
  loadCount()
}

onLoad(() => {
  // const SYSTEM_INFO = uni.getSystemInfoSync()
  // statusBarHeight.value = SYSTEM_INFO.statusBarHeight
})

onMounted(() => {
  // 先加载分组，再加载数据列表
  loadGroupList()
  // 加载统计数据
  loadCount()
  // 设置定时器，定时刷新数据：分组内容、提示内容，设置每1分钟刷新一次数据
  timer.value = setInterval(() => {
    // 先加载分组，再加载数据列表
    loadGroupList()
    // 加载统计数据
    loadCount()
  }, 60000 * 1)
})

onShow(() => {
  // 先加载分组，再加载数据列表
  loadGroupList()
  // 加载统计数据
  loadCount()
})
</script>

<style lang="scss" scoped>
.wrap {
  .tp {
    background: linear-gradient(to bottom, #daf0fe, #f9fbfb);
    // position: sticky;
    // top: 0;
    // z-index: 1000;
    .navbar {
      :deep(.wd-navbar__title) {
        color: #000;
      }
      :deep(.wd-navbar) {
        background-color: transparent;
        --wot-navbar-title-font-weight: 400;
        --wot-navbar-arrow-size: 36rpx;
        --wot-navbar-desc-font-size: 14px;
        --wot-navbar-title-font-size: 16px;
      }
    }
    .tab {
      padding: 0rpx 30rpx;
      .scroll-view {
        white-space: nowrap; /* 防止子元素换行 */
        height: 66rpx;
        width: 100%; /* 设置一个固定的高度 */
        .tab-left-item {
          display: inline-block;
          min-width: 30px;
          text-align: center;
          font-size: 22rpx;
          margin-right: 12rpx;
          background-color: #edf8fd;
          padding: 10rpx 24rpx;
          border-radius: 28rpx;
          font-weight: 500;
        }
        .tab-left-item-active {
          background-color: #3b82ec;
          color: #fff;
          font-weight: 500;
        }
      }
      .tab-right {
        width: 0%;
      }
    }
    .count {
      width: 95%;
      margin: 0 auto;
      padding: 12px 10px;
      border-radius: 10px;
      background-color: #fff;
      position: relative;
      opacity: 0.9;
      background-image: url(../../static/hold/hold-data-bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .count-top {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        .count-top-left {
          font-weight: 600;
        }
      }
      .count-data {
        display: flex;
        text-align: center;
        margin: 10px 0px;
        .count-data-left {
          width: 100px;
          padding: 10px 0px;
          .count-data-left-title {
            font-size: 26rpx;
          }
          .count-data-left-data {
            margin-top: 24rpx;
            font-size: 40rpx;
            font-weight: 600;
          }
        }
        .count-data-right {
          .count-data-right-data {
            font-weight: 600;
            margin-bottom: 2rpx;
          }
          .count-data-right-desc {
            font-size: 24rpx;
          }
        }
      }
      .count-bottom {
        display: flex;
        align-items: center;
        .count-bottom-item {
          flex-grow: 1;
          display: flex;
          .count-bottom-item-img {
            width: 70rpx;
            height: 70rpx;
            margin-right: 8px;
          }
          .count-bottom-item-desc {
            font-size: 24rpx;
          }
          .count-bottom-item-data {
            font-size: 26rpx;
          }
        }
      }
    }
  }
  .list {
    // padding: 20rpx 20rpx 0rpx 20rpx;
    // background-color: #fff;
    .list-title-box {
      text-align: right;
      // padding: 20rpx;
      padding-left: 20rpx;
      padding-right: 20rpx;
      border-bottom: 1px solid #f2f2f2;
      color: #505b64;
      :deep(.wd-drop-menu__item) {
        // height: var(--line-height, 26rpx);
        // line-height: var(--line-height, 26rpx);
        color: #505b64;
      }
      :deep(.wd-drop-menu__item-title::after) {
        background: var(--background);
      }
      :deep(.wd-drop-menu__item) {
        text-align: right;
      }
      :deep(.wd-drop-menu__item-title-text) {
        font-size: 26rpx;
      }
    }
    .fu-list-item {
      width: 95%;
      margin: 14rpx auto;
      background-color: #fff;
      padding: 20rpx;
      border-radius: 20rpx;
      // border-bottom: 1px solid #f2f2f2;
      font-size: 28rpx;
      .item-row {
        margin-top: 16rpx;
        font-size: 24rpx;
        .item-row-name {
          font-size: 22rpx;
          margin-bottom: 8rpx;
          color: #8a8a8a;
        }
      }
      .tip-box {
        font-size: 20rpx;
        padding: 8rpx 10rpx;
        border-radius: 8rpx;
      }
    }
  }
}
.btn {
  padding: 10px;
  color: #65737e;
  font-size: 24rpx;
}
</style>
